<template>
  <div>
    <Head :head="head" @greet="greet"></Head>
    <el-dialog
      :visible.sync="centerDialogVisible"
      width="1000px"
      center>
      <div class="left_essential base">
        <img src="/static/assets/img/dtx1.png" alt="">
        <p v-for="(c,index) in cs" @click="sorts($event, index, c.t)" v-bind:class="{'visible1':nowIndex == index}" :key="c.index">{{ c.name }}</p>
      </div>
      <div class="right_essential" v-if="temp1 == 1">
        <p>尊敬的{{user}}用户，胸痛质控大家庭感谢您的加入</p>
        <div><p><span>组织</span></p><p><span>个人资料</span></p></div>
        <div><p><span>头像</span><img src="/static/assets/img/logo.png" alt=""></p><p><span>姓名</span>{{user}}</p><p><span>头像</span><img src="/static/assets/img/dtx.png" alt=""></p></div>
        <div><p><span>权限</span>{{user}}</p><p><span>权限</span>{{user}}</p></div>
        <div><p><span>简称</span>{{user}}</p><p><span>职务</span>{{user}}</p><p><span>科室</span>{{user}}></p></div>
        <div><p></p><p><span>手机</span>{{user}}<span class="tip">已绑定</span></p><p><span>邮箱</span>{{user}}<span class="tip">已验证</span></p></div>
      </div>
      <div class="right_essential" v-if="temp1 == 2">
        <p>您的安全服务</p>
        <div><p><span class="width_user">用户名</span>{{user}}</p></div>
        <div><p><span>绑定邮箱</span></p><span class="tip2">修改邮箱</span></div>
        <div><p><span>绑定手机</span>{{user}}</p></div>
        <div><p><span>登录密码</span>{{user}}</p><span class="tip2">修改邮箱</span></div>
      </div>
      <div class="both"></div>
    </el-dialog>
    <el-container class="right_bgcolor">
      <div class="bgcolor" style="width: 100%;">
        <left-top :active="6"></left-top>
        <el-main>
          <div style="width: 80%;margin: 0 auto;">
            <div class="first"><span class="vis">简报</span>&nbsp;|&nbsp;<span>年报</span></div>
            <div class="second">
              <img src="/static/assets/img/24.png" style="width:20px;margin-bottom: 3px">
              <span class="lsp ml-5">指标类型</span> <span class="ml-30 vis sp">质控指标</span>&nbsp;|&nbsp;<span class="sp">再认证指标</span>
            </div>
          </div>
          <div class="third" style="width: 80%;margin: 0 auto;">
            <el-row>
              <el-col :span="12">
                <img src="/static/assets/img/21.png" style="width:20px;margin-bottom: 3px">
                <span class="lsp ml-5">选择时间</span> <span class="sp ml-30"> > &nbsp;2018年01月&nbsp;></span>&nbsp;至&nbsp;<span class="sp">>&nbsp;2018年06月&nbsp;></span>
              </el-col>
              <el-col :span="12" style="text-align: right;">
                <p class="fr" style="margin-top: 10px"><span style="margin-right:5px">仅通过认证</span><el-checkbox v-model="checked"></el-checkbox></p>
              </el-col>
            </el-row>
          </div>
          <div class="third" style="width: 80%;margin: 0 auto;">
            <el-row>
              <el-col :span="16">
                <img src="/static/assets/img/23.png" style="width:20px;margin-bottom: 3px">
                <span class="lsp ml-5">选择范围</span> <span class="sp ml-30"><el-select style="width: 100px;" placeholder="江苏省" class="bbb">
                    <el-option label="江苏省" value="1"></el-option>
                  </el-select>
              </span><span class="sp ml-5"><el-select style="width: 100px;" placeholder="苏州" class="bbb">
                    <el-option label="苏州" value="1"></el-option>
                  </el-select>
              </span><span class="sp ml-5"><el-select style="width: 200px;" placeholder="苏州大学附属第一医院" class="bbb">
                    <el-option label="苏州大学附属第一医院" value="1"></el-option>
                  </el-select>
              </span>
              </el-col>
              <el-col :span="8" class="bettew_top">
                <button type="button" class="re_btn">&nbsp;+&nbsp;</button>
                <button type="button" class="re_btn_a ml-15" @click="confirm(true)">确定</button>
              </el-col>
            </el-row>
          </div>
          <div style="width: 80%;margin: 0 auto;margin-top: 10px;" v-if="conf">
            <img src="/static/assets/img/7.png">
          </div>
        </el-main>
      </div>
    </el-container>
  </div>
</template>

<script>
import Head from '@/components/Head'
import LeftTop from '@/components/Left'
export default {
  data () {
    return {
      checked: true,
      temp: true,
      temp1: 1,
      conf: false,
      nowIndex: 0,
      centerDialogVisible: false,
      cs: [
        {name: '账户资料', t: 1},
        {name: '安全设置', t: 2}
      ],
      user: '543759843@qq.com',
      head: {
        platform: '江苏省胸痛中心质控管理平台',
        analysis: '江苏省胸痛中心建设地图实时动态',
        name: '刘冰冰 ',
        methods: 'greet'
      }
    }
  },
  components: {
    Head,
    LeftTop
  },
  methods: {
    greet: function () {
      this.centerDialogVisible = true
    },
    pass: function (str) {
      this.temp = str
    },
    sorts: function (event, index, t) {
      this.nowIndex = index
      this.temp1 = t
    },
    confirm: function (str) {
      this.conf = str

      var ipcRenderer = window.require('electron').ipcRenderer
      ipcRenderer.send('switch-page', '#/report')
    }
  }
}
</script>

<style scoped>
  body > .el-container {
    margin-bottom: 40px;
  }
  .top_qi{
    line-height: 37px;
  }
  .right_bgcolor{
    padding: 20px 20px 20px 0;
    background-color: #f2f2f2;
  }
  .right_bottom div{
    margin-top: 50px;
    line-height: 25px;
  }
  /*标题*/
  .grad h1{
    float: left;
    line-height: 60px;
    color: #ffff;
    font-size: 25px;
  }
  .el-main{
    min-height: 820px;
  }
  /*右边图标*/
  .grad img{
    margin-left: 30px;
    margin-top: 38px;
  }
  /*版本 时间点击弹出事件*/
  .version{
    display: inline-flex;
    float: right
  }
  .bettew_top{
    line-height: 40px;
  }
  hr{color:#f2f2f2}
  .sub-card{
    position: absolute;
    z-index: 100;
    top: 80px;
    height: 392px;
    width: 480px;
    right: 0;
    line-height: 20px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border-radius: 4px;
  }
  .sub-tip{
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 0px solid white;
    transition: border-bottom-width 120ms ease-out;
  }
  .btn{
    border:1px solid #fff;
    color:#fff;
    background-color: #1086FD;
    width: 70px;
    height: 30px;
    border-radius: 25px;
  }
  .rotate{
    transition: transform .3s;
  }
  .none_black{
    border-bottom: 1px solid #ddd;
    margin-right: 5px;
  }
  .bgcolor{
    background-color: #fff;
  }
  .detail{
    background: #CCCCCC;
    width: 70px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    color: #ffffff;
    cursor: pointer;
  }
  .bettew_top{
    line-height: 40px;
  }
  .el-main{
    margin-left: 9%;
  }
  .first{
    text-align: right;
    margin-right: 20px;
  }
  .vis{
    color: #1086FD !important;
    line-height: 26px;
    border-bottom: 1px solid #1086FD;
  }
  .ml-30{
    margin-left: 30px;
  }
  .ml-15{
    margin-left: 15px;
  }
  .ml-5{
    margin-left: 5px;
  }
  .sp{
    line-height: 26px;
    font-size: 16px;
    color: #808080;
  }
  .lsp{
    line-height: 26px;
    font-size: 16px;
    margin-left: 5px;
    color: #808080;
  }
  .third{
    line-height: 26px;
    font-size: 16px;
    margin-top: 5px;
    color: #808080;
  }
  .re_btn{
    width: 60px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #1086FD;
    background: #ffffff;
    color: #1086FD;
    border-radius: 10px;
  }
  .re_btn_a{
    width: 70px;
    height: 26px;
    line-height: 26px;
    border: 1px solid #1086FD;
    background: #1086FD;
    color: #ffffff;
    border-radius: 10px;
  }
</style>
